import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Experience from "../XZpages/Experience/index.js"
import HousingResources from "../XZpages/HousingResources/index.js"
import Restaurant from "../XZpages/Restaurant/index.js"
import "./index.css";

class explore extends Component {
    // constructor(){
    //     super()
    //    this.state = {
    //     arr:[
    //         {name:"房源",img:"https://a0.muscache.com/im/pictures/6722906/b4bc6418_original.jpg?aki_policy=large"},
    //         {name:"体验",img:"https://a0.muscache.com/im/pictures/d053ad7e-9ab7-4912-8cad-5d42a99b3c02.jpg?aki_policy=large"},
    //         {name:"餐馆",img:"https://a0.muscache.com/im/pictures/ac7e4fb2-c0f8-4e8a-ad5c-9153a49280e9.jpg?aki_policy=large"}
    //     ]
    //    }
    // }
    render() {
        return (
            <div className="app">
                <div className="words">
                    探索爱彼迎
                </div>
                <Router>
                    <div className="section">
                        <Link to="/XZpages/Experience" >
                            <div className="box">
                                <div className="box-left">
                                    <img src="https://a0.muscache.com/im/pictures/6722906/b4bc6418_original.jpg?aki_policy=large" alt="" />
                                </div>
                                <div className="box-right">
                                    <span>房源</span>
                                </div>
                            </div>
                        </Link>
                        <Link to="/XZpages/HousingResources" >
                            <div className="box">
                                <div className="box-left">
                                    <img src="https://a0.muscache.com/im/pictures/d053ad7e-9ab7-4912-8cad-5d42a99b3c02.jpg?aki_policy=large" alt="" />
                                </div>
                                <div className="box-right">
                                    <span>体验</span>
                                </div>
                            </div>
                        </Link>
                        <Link to="/XZpages/Restaurant" >
                            <div className="box">
                                <div className="box-left">
                                    <img src="https://a0.muscache.com/im/pictures/ac7e4fb2-c0f8-4e8a-ad5c-9153a49280e9.jpg?aki_policy=large" alt="" />
                                </div>
                                <div className="box-right">
                                    <span>餐馆</span>
                                </div>
                            </div>
                        </Link>
                        <Route path="/XZpages/Experience" exact component={Experience}></Route>
                        <Route path="/XZpages/HousingResources" component={HousingResources}></Route>
                        <Route path="/XZpages/Restaurant" component={Restaurant}></Route>
                    </div>
                </Router>
            </div>
        );
    }
}
export default explore;

